@import './variables.less';
@import './mixin.less';
@import './transition.less';
@import './element-ui.less';
@import './sidebar.less';
@import './btn.less';
@import './my-detail.less';

body {
  height: 100%;
  overflow-y: hidden !important;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;

  /**火狐浏览器-滚动条样式**/
  // scrollbar-color: transparent transparent;
  // scrollbar-track-color: transparent;
  // -ms-scrollbar-track-color: transparent;
}

/**谷歌浏览器-滚动条样式**/
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-button:vertical{display: none;}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
::-webkit-scrollbar-thumb{border-radius: 0; background-color: rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}



label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.flex{
  display: flex;
  justify-content: flex-start;
}

.flex-center{
  display: flex;
  justify-content: center;
}

.flex-between{
  display: flex;
  justify-content: space-between;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

.inlineBlock {
  display: block;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

aside {
  background: #eef1f6;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // 禁止用户双击选中文本
  -webkit-user-select:none;/*谷歌 /Chrome*/
  -moz-user-select:none; /*火狐/Firefox*/
  -ms-user-select:none;    /*IE 10+*/
  user-select:none;

  // 隐藏侧边栏菜单横向滚动条
  .el-scrollbar .el-scrollbar__bar.is-horizontal{
    display: none;
  }

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

//main-container全局样式
.app-container {
  padding: 20px;
}

.components-container {
  margin: 30px 50px;
  position: relative;
}

// .pagination-container {
//   margin-top: 0px;
// }

.text-center {
  text-align: center
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

  .subtitle {
    font-size: 20px;
    color: #fff;
  }

  &.draft {
    background: #d0d0d0;
  }

  &.deleted {
    background: #d0d0d0;
  }
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}

.filter-container {
  padding-bottom: 5px;
  text-align: left;

  &>*{
    display: inline-block;
    margin-right: 10px !important;
    margin-left: 0px !important;
  }
}

//refine vue-multiselect plugin
.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}


/******自定义图标-begin***********/
.my-svg{
  display: inline;
  width: 18px;
  height: 18px;
}

/* 列表-详情展开样式 */
.my-table-expand {
  font-size: 0;
  padding: 0px 15px;
  
  .el-form-item {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: 100%;

    label {
      width: 90px !important;
      color: #99a9bf;
    }
  }
}

/**************自定义文本颜色样式*****************************/
.c-sred{/* 深红色 */
	color:#800000 !important;
}
.c-red{/* 红色 */
	color:#f00 !important;
}
.c-pink{/* 粉红色 */
	color:#F56C6C !important;
}
.c-ared{/* 暗红色 */
	color:#B61D1D !important;
}
.c-green{/* 绿色 */
	color:#008000 !important;
}
.c-qgreen{/* 青绿 */
	color: #00c3ce !important;
}
.c-yellow{/* 黄色 */
	color:#ff7300 !important;
}
.c-gray{/* 灰色 */
	color:#ccc !important;
}
.c-bbb{/* 浅灰色 */
	color:#666 !important;
}
.c-999{/* 浅灰色 */
	color:#999 !important;
}
.c-ccc{/* 淡灰色 */
	color:#ccc !important;
}
.c-blue{/* 蓝色 */
	color:#108ee9 !important;
}
.c-dblue{/* 淡蓝色 */
	color:#3e9bff !important;
}
.c-sblue{/* 深蓝色 */
	color:#06c !important;
}
.c-black{/* 黑色 */
	color:#000 !important;
}
.c-333{/* 浅黑色 */
	color:#333 !important;
}
.c-white{/* 白色 */
	color:#fff !important;
}
.c-fff{/* 白色 */
	color:#fff !important;
}

.fs-18{
  font-size: 18px !important;
}

.sl{
  overflow: hidden;//溢出隐藏
  white-space: nowrap;//禁止换行
  text-overflow: ellipsis;//...
}


/** el表单底部样式 **/
// 表单项分隔
.fm-split{
  padding: 0px 5px;
}

.fm-btn-row{
  text-align: center; 
  margin: 10px 0 15px 0;
}

.fm-btns {
  margin-bottom: 0px !important;

  // 按钮组
  .btns{
    text-align: center;
  }

  // 功能说明
  .fun-explain{
    margin-top: 10px;
    border-top: 1px dashed #efefef;
    font-size: 12px;
    color: #666;
    padding: 10px;
  }

}

// 表单短信验证码项
.sms-code-item{
  ::v-deep .el-input input{
    padding-right: 80px;
  }
  .sms-btn{
    color: #2979ff;
    position: absolute;
    right: 10px;
    cursor: pointer;
  }
}

/** el表格单元格内popover **/
.tb-popover p{
  margin: 0;
}


/*********element-ui-覆盖样式--begin*****************/

/* 按钮样式 */
.el-button--mini{
  padding: 7px 8px !important;
}

/* 全局加载组件样式 */
.my-loading {
  z-index: 999999 !important;

  // 图标
  .el-loading-spinner i{
    color: #fff !important;
  }

  // 文本
  .el-loading-text{
    color: #fff !important;
  }
}

/* dialog模态框样式 */
.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: Center;
  // 不显示弹框的滚动条(这个对弹框的拖出浏览器很有作用)
  overflow: hidden !important;

  .el-dialog {
    margin: 0 auto !important;
    min-height: 100px;
    max-height: 100vh;
    height: auto;
    overflow: hidden;
    border-radius: 5px !important;
    margin-bottom: 0 !important;

    .el-dialog__header{
      border-bottom: 1px solid #e8e8e8;
    }

    .el-dialog__footer{
      border-top: 1px solid #e8e8e8;
    }

    .el-dialog__body {
      padding: 10px 10px 10px 10px !important;
      z-index: 1;
      overflow-y: auto;
    }
  }
}

/* 图片预览插件样式 */
.el-image-viewer__wrapper{

  .el-image-viewer__btn{
    i{
      color: #fff !important;
    }
  }
}

/* 自定义上传图片样式 */
.my-upload-img.upload-img{
  width: 80px !important;
  height: 29px !important;

  .el-upload .avatar-uploader-icon{
    line-height: 29px !important;
  }
}

/* table顶部顶部工具栏 */
.filter-container .dgts-row .el-form-item,
.filter-container .el-form .el-form-item{
  margin-bottom: 0px !important;
}


.filter-container{
  line-height: 30px;
  position: relative;

  .dgts-row{
    display: flex;
    line-height: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 30px !important;
    
    /* 列表顶部工具栏统计等文本--begin */ 
    .dgts-text{// 当文本和按钮等放一行时需要加此类样式
      line-height: 30px;
    }
    .tr-it-title{
      font-size: 15px;
    }
    .tr-it{
      font-size: 13px;
    }

    .dgts-text-tj1{
      line-height: 30px;
      margin: 0px 10px;
      background: #fde2e2;
      border-radius: 5px;
      padding: 0px 10px;
    }
    .dgts-text-tj2{
      line-height: 30px;
      margin: 0px 10px;
      background: #b3d8ff;
      border-radius: 5px;
      padding: 0px 10px;
    }
    /* 列表顶部工具栏统计等文本--end */
    
  }
}

// 表格-行中的自定义图片显示样式
.list-row-img{
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px dashed #bbb;
  border-radius: 3px;
}

.el-main{

  .filter-container{
    line-height: 30px;
    position: relative;

    .dgts-row{
      display: flex;
      line-height: 20px;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-right: 30px !important;
      // line-height: 30px;

      .r-title{
        font-size: 12px;
        font-weight: 600;

        span{
          margin-right: 20px;
          font-size: 12px;
          font-weight: normal;
        }
      }

      label{
        font-size: 12px;
        font-weight: normal;

        span{
          margin-right: 20px;
          font-size: 12px;
        }
      }
      
      /* 列表顶部工具栏统计等文本--begin */ 
      .dgts-text{// 当文本和按钮等放一行时需要加此类样式
        line-height: 30px;
      }
      .tr-it{
        font-size: 13px;
      }
      /* 列表顶部工具栏统计等文本--end */
      
    }

    .dgts-fm{
      >div{
        margin-right: 10px !important;
      }
    }

    .sh-fields{
      position: absolute;
      bottom: 5px;
      right: 0px;

      .icon-item{
        display: inline-block;
        margin-left: 10px;
      }
    }

  }
  
}


/* table列表分页样式 */
// .pagination-container{
//   text-align: center;
//   padding: 5px !important;
//   margin-top: 0px !important;
// }

/* select下拉列表框样式 */
.el-select-dropdown__list{

  .el-select-dropdown__item{

    span:first-child{
      float: left;
    }
    span:first-child + span{
      float: right;
      color: #8492a6; 
      font-size: 13px;
    }
  }
}

/* 列表样式覆盖-横向滚动条高度 */
.el-table .el-table__body-wrapper::-webkit-scrollbar{
  height: 10px !important;// 重新设置横向滚动条高度，以便用户使用鼠标拖动
}

/* 覆盖原有表格样式-调整高度间隔 */
.el-table{
  td, th{
    padding: 1px !important;
  }
  
  .cell{
    line-height: 15px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* tab样式覆盖 */
.el-tabs .is-active:focus-visible{outline: 0;}



/*********element-ui-覆盖样式--end*******************/
